<template>
    <div class="c-date">
        <el-form ref="form" :inline="true" size="small">
            <el-form-item>
                <span class="title">{{title}}</span>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="model.startDate"
                        :type="type"
                        :editable="false"
                        @focus="handleFocus"
                        @blur="handleBlur"
                        placeholder="选择日期">
                </el-date-picker>
<!--                <el-date-picker-->
<!--                        v-model="model.startDate"-->
<!--                        :type="type"-->
<!--                        placeholder="选择日期"-->
<!--                        :format="format"-->
<!--                        :editable="false"-->
<!--                        @focus="handleFocus"-->
<!--                        @blur="handleBlur"-->
<!--                        :style="{width: `${width}px`}"-->
<!--                >-->
<!--                </el-date-picker>-->
            </el-form-item>
<!--            <el-tooltip :content="content" placement="top" :value="autoShowTooltip" :manual="true" :hide-after="1000"-->
<!--                        v-if="isShowTooltip">-->
<!--                <template #content>-->
<!--                    <span style="padding-right: 10px" @mouseenter="handleEnter"-->
<!--                          @mouseleave="handleLeave">_</span>-->
<!--                </template>-->
<!--            </el-tooltip>-->
<!--            <span style="padding-right: 10px" v-else>_</span>-->
            <el-form-item>
                <el-date-picker
                        v-model="model.endDate"
                        :type="type"
                        placeholder="选择日期"
                        :editable="false">
                </el-date-picker>
            </el-form-item>
<!--            <el-form-item>-->
<!--                <slot name="active"></slot>-->
<!--                <el-button v-if="action.includes('ok')" type="common" icon="el-icon-search" class="search"-->
<!--                           size="small"-->
<!--                           @click="handleSearch"-->
<!--                           @mouseenter="handleEnter" @mouseleave="handleLeave"-->
<!--                           style="display: inline-block;">-->
<!--                    <span class="hidden-md-and-down">{{btnTxt}}</span>-->
<!--                </el-button>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--                <span v-if="showHeatSeason" style="margin-left: 20px;">-->
<!--                    <i class="el-icon-guide"-->
<!--                       style="padding-right: 2px"></i>查询跨度归属采暖季 [ <i-->
<!--                        style="font-style: normal;color: #f56c6c">{{season}}</i> ]-->
<!--                </span>-->
<!--            </el-form-item>-->
        </el-form>
    </div>
</template>

<script lang="ts">
    import {reactive,ref} from 'vue'
    // import {formatDate} from "../../assets/js/util";
    export default {
        name: "c-date",
        props: {
            title: String,
            initType: {
                type: String,
                default: 'date'
            },
            initFormat: {
                type: String,
                default: 'yyyy-MM-dd'
            },
            isDisableToday: {
                type: Boolean,
                default: false
            },
            intervalDate: {
                type: Number,
                default: 7
            },
            action: {
                type: Array,
                default() {
                    return ['ok'];
                }
            },
            btnTxt: {
                type: String,
                default: '查询'
            },
            isShowTooltip: {
                type: Boolean,
                default: true
            },
            isAutoTooltipShow: {
                type: Boolean,
                default: false
            },
            showHeatSeason: {  //是否显示查询跨度归属季度
                type: Boolean,
                default: false
            }
        },
        setup(props,context){
            console.log(props,context);
            const model = reactive({
                startDate: '',
                endDate: ''
            })
            const type = ref(props.initType)
            const format = ref(props.initFormat)
            const valueFormat = ref(props.initValueFormat)

            const getModel=()=>model
            return{
                model,
                type,
                format,
                valueFormat,
                getModel
            }
        }
    }
</script>

<style scoped>

</style>
